<template>
	<div>
		<el-form
			ref="addForm"
			:rules="addFormRules"
			:model="addForm"
			label-width="80px"
		>
			<el-form-item label="图书名" prop="name">
				<el-input v-model="addForm.name" placeholder="请输入图书名"></el-input>
			</el-form-item>
			<el-form-item label="作者" prop="author">
				<el-input v-model="addForm.author" placeholder="请输入作者"></el-input>
			</el-form-item>
			<el-form-item label="分类" prop="cateid">
				<el-select v-model="addForm.cateid">
					<el-option
						v-for="item in catelist"
						:key="item.book_cate_id"
						:label="item.book_cate_name"
						:value="item.book_cate_id"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="出版社" prop="press">
				<el-input v-model="addForm.press"></el-input>
			</el-form-item>
			<el-form-item label="简介" prop="press">
				<el-input
					type="textarea"
					v-model="addForm.info"
					maxlength="100"
					show-word-limit></el-input>
			</el-form-item>
			<el-form-item label="发布日期" prop="publishdate">
				<el-date-picker
					v-model="addForm.publishdate"
					type="date"
					placeholder="请选择发布日期"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="confirmAdd">确认</el-button>
				<el-button @click="reset('addForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: "addUser",
	created () {
		this.getCateList();
	},
	data () {
		return {
			catelist: [], // 分类列表
			addForm: {
				name: "",
				author: "",
				cateid: "",
				publishdate: "",
				press: '',
				info: ''
			},
			addFormRules: {
				name: [
					{
						type: "string",
						required: true,
						message: "图书名不能为空",
						trigger: "blur",
					},
				],
				author: [
					{
						type: "string",
						required: true,
						message: "作者不能为空",
						trigger: "blur",
					},
				],
				cateid: [
					{
						type: "string",
						required: true,
						message: "分类不能为空",
						trigger: "blur",
					},
				],
				press: [
					{
						type: "string",
						required: true,
						message: "出版社不能为空",
						trigger: "blur",
					},
				],
				info: [
					{
						type: "string",
						required: true,
						message: "简介不能为空",
						trigger: "blur",
					},
				],
				publishdate: [
					{
						required: true,
						message: "发布时间不能为空",
						trigger: "blur",
					},
				],
			},
		};
	},
	methods: {
		async getCateList () {
			const { data } = await this.http({
				method: "post",
				url: "/api/cate/listselect",
			});
			if (data.errno !== 0) {
				return this.msg({
					type: "error",
					message: "获取分类列表失败",
				});
			}
			this.catelist = data.data;
		},
		confirmAdd () {
			this.$refs["addForm"].validate(async (valid) => {
				if (valid) {
					const { data } = await this.http({
						method: "post",
						url: "/admin/books/storage",
						data: this.addForm,
					});
					if (data.errno !== 0) {
						return this.msg({
							type: "error",
							message: "新增图书失败",
						});
					}
					this.msg({
						type: "success",
						message: "新增图书成功",
						onClose: () => {
							this.$refs["addForm"].resetFields();
							this.addForm.cateid = "";
							this.addForm.info = ''
						},
					});
				} else {
					this.msg({
						type: "error",
						message: "表单信息校验未通过",
					});
				}
			});
		},
		reset (form) {
			// this.addForm = { ...defaultAddForm }
			this.$refs[form].resetFields();
			this.addForm.cateid = "";
		},
		// 重置表单

	},
};
</script>

<style lang="less" scoped>
.el-form {
	width: 400px;
}
</style>
